<template>
  <!-- <div>资金月计划</div> -->
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="采购付款" name="1"></el-tab-pane>
        <el-tab-pane label="物流付款" name="2"></el-tab-pane>
        <el-tab-pane label="其他付款" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == '1'">
      <Purchase :optionsData="optionsDataAll" />
    </template>
    <template v-else-if="activeName == '2'">
      <Logistics :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Other :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup>
import Logistics from "./components/logistics/index.vue";
import Purchase from "./components/purchase/index.vue";
import Other from "./components/other/index.vue";
import { getSupplie } from "@/api/public.js";
import { getAccountPrincipal, getOption } from "@/api/index.js";
const activeName = ref("1");
const optionsData = ref({});
const getSupplieList = async () => {
  const { data } = await getSupplie();
  let opt = data.map((item) => {
    return {
      label: item.supplier_name,
      value: item.s_id,
    };
  });
  optionsData.value.supplierList = opt || [];
};
const getAccountPrincipalList = async () => {
  const { data } = await getAccountPrincipal();
  optionsData.value.principalIds = data || [];
};
getAccountPrincipalList();
const optionsData1 = ref({});
const getOpt = async () => {
  const { data } = await getOption({
    enums: "payment_type,logistics_cost,providerName,payment_fund_item",
  });
  optionsData1.value = data || {};
};
getOpt();
getSupplieList();
const optionsDataAll = computed(() => {
  return {
    ...optionsData.value,
    ...optionsData1.value,
  };
});
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
